<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>1</h1>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>

    <script>
        // 1. 获取dom
        var container = document.querySelector('.container')

        console.log(container.childNodes)
        // 文本: nodeType = 3
        // 元素: nodeType = 1

        
        // 创建节点
        let pDom = document.createElement('p')
        pDom.innerText = '6'
        
        // container.innerHTML = '7' // 替换html
        // container.innerHTML = '<h1> 1 1 1 </h1>'

        // 往节点上添加内容
        pDom.className = 'pdom'
        pDom.id = 'pdom'
        pDom.style.color = 'red'
        
        // 2. 添加内容

        container.appendChild(pDom) // 添加到后面


        container.insertBefore(pDom, container.children[1]) // 在第1个元素前添加

      
        let textDom = []
        let elementDom = []
        container.childNodes.forEach(element => {
            if (element.nodeType == 3) {
                textDom.push(element)
            }
            else if (element.nodeType == 1) {
                elementDom.push(elementDom)
            }
        });
        console.log(textDom, elementDom)




    </script>
    
</body>

</html>